<template>
    <el-menu  class="el-menu-vertical-demo" background-color="#ffffff">
        <template v-for="year in menu_list" :key="year.id"> 
            <el-menu-item v-if="year.children.length===0"                        
                :key="year.id" :index="year.id.toString()">                    
                <template #title>
                    {{ year.name }}
                </template>
            </el-menu-item>
            <el-sub-menu v-if="year.children.length > 0"  :key="year.id" :index="year.id.toString()">
                <template #title>
                    {{ year.name}}
                </template>
                <template v-for="month in year.children" :key="month.id"> 
                    <el-menu-item v-if="month.children.length===0"                        
                        :key="month.id" :index="month.id.toString()">                    
                        <template #title>
                            <el-text>{{ month.name }}</el-text>
                        </template>
                    </el-menu-item>
                    <el-sub-menu v-if="month.children.length > 0"  :key="month.id" :index="month.id.toString()">
                        <template #title>
                            <el-text>{{ month.name}}</el-text>
                         </template>
                            <div v-for="paper in month.children" :key="paper.id">
                                <el-menu-item :index="paper.id.toString()"
                                    @click="selectPaperClick(paper.id, paper)">              
                                        {{ paper.name}}
                                </el-menu-item>                                             
                              
                            </div>          
                       
                        
                    </el-sub-menu>
                </template>          
            </el-sub-menu>
        </template>          
    </el-menu>
</template>
  
<script setup>
    import { useRoute, useRouter } from 'vue-router'
    import { useStore } from 'vuex'
    const store=useStore()
    const router = useRouter()
    const props = defineProps({
      menu_list: Array,
    });
    const selectPaperClick=(paper_id, paper)=>{
        store.commit("setGenaralPaper", paper)
        router.push({path:'/getQuestionsByGenaralPaper', query:{ id: paper_id, page: 1, size: 10}})
    }
</script>

<style scoped>

</style>